<template>
	<view class="finddoctor">
		<!-- 搜索 -->
		<view class="doclist_search" :style="{height: (showArea||showAt||showMode)?'100%':'auto'}"  @click="showArea=false,showAt=false,showMode=false">
			<view class="outer" @tap.stop="stop">
				<!-- 搜索 -->
				<view class="search-box">
					<u-search
						:showAction="false"
						shape="square"
						placeholder="搜索医生"
						placeholderColor="#999999"
						bgColor="#f6f6f6"
						@search="Onsech"
						>
					</u-search>
				</view>

				<view class="funnel">
					<view class="u-flex u-flex-between" style="padding: 0 14rpx 22rpx;">
						<view class="item u-flex-fill u-flex u-flex-center">
							<view class="u-flex" @click="showArea=!showArea,showAt=false,showMode=false">
								<view>{{areaTitle}}</view>
								<u-icon name="arrow-down-fill" color="#b0b0b0"></u-icon>
							</view>
						</view>
						<view class="item u-flex-fill u-flex u-flex-center">
							<view class="u-flex" @click="showArea=false,showAt=!showAt,showMode=false">
								<view>{{academicTitlet}}</view>
								<u-icon name="arrow-down-fill" color="#b0b0b0"></u-icon>
							</view>
						</view>
						<view class="item u-flex-fill u-flex u-flex-center">
							<view class="u-flex" @click="showArea=false,showAt=false,showMode=false">
								<view>{{interrogationModeTitle}}</view>
								<u-icon name="arrow-down-fill" color="#b0b0b0"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="funnel-mode" v-if="showArea||showAt||showMode" @tap.stop="stop">
				<view class="area-list u-flex" v-if="showArea">
					<view class="left">
						<view class="item" :class="{on:it.code==provinceCode}" v-for="(it,idx) in provinceList" :index="idx" @click="changeProvince(it.code, it.title)">{{it.title}}</view>
					</view>
					<view class="right">
						<view class="item" :class="{on:it.code==cityCode}" v-for="(it,idx) in cityList" :index="idx" @click="changeCity(it.code, it.title)">{{it.title}}</view>
					</view>
				</view>

				<view class="at-list" v-if="showAt">
					<view class="item" :class="{on:it.id==academic}" v-for="(it,idx) in atList" :index="idx" @click="confirmAcademic(it.id,it.name)">{{it.name}}</view>
				</view>

				<view class="mode-list" v-if="showMode">
					<view class="item" :class="{on:it.id==interrogationMode}" v-for="(it,idx) in interrogationModeList" :index="idx" @click="confirmInterrogationMode(it.id,it.title)">{{it.title}}</view>
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 数据 -->
			<view class="doctor-list" v-if="group.list.length>0">
				<view class="item" v-for="(item,index) in group.list" :key="index" @click="onSelect(item)">
					<!-- <view class="status">在线</view> -->
					<view class="status success" v-if="item.newwork_status==1">在线</view>
					<view class="status warn" v-else-if="item.newwork_status==2">繁忙</view>
					<view class="status" v-else>离线</view>
					<view class="info u-flex">
						<image class="avatar" :src="$base.cdn(item.img,'/static/lj/common/default-doctor.png')" mode="aspectFill"></image>
						<view class="u-flex-fill">
							<view class="tit u-flex u-flex-items-end">
								<view class="name">{{item.name}}</view>
								<view class="zc">{{item.academic_title}}</view>
							</view>
							<view class="u-flex">
								<view class="address">{{item.city}}{{item.practice_organization}}</view>
								<view class="department">眼科</view>
							</view>
							<view class="num-box u-flex">
								<view class="num-item u-flex">
									<view class="label">图文问诊：</view>
									<view class="num">{{item.consultation_count}}</view>
								</view>
								<view class="num-item u-flex">
									<view class="label">视频问诊：</view>
									<view class="num">{{item.consultation_viedo_count}}</view>
								</view>
							</view>
							<view class="num-box u-flex">
								<view class="num-item u-flex">
									<view class="label">报告解读：</view>
									<view class="num">{{item.consultation_report_count}}</view>
								</view>
								<view class="num-item u-flex">
									<view class="label">好评：</view>
									<view class="num">{{parseFloat(item.score||0)>0?(parseFloat((parseFloat(item.score||0)/5*100).toFixed(2))>100?100:parseFloat((parseFloat(item.score||0)/5*100).toFixed(2)))+'%':'暂无'}}</view>
								</view>
							</view>
							<view class="con u-line-2">
								擅长：{{item.be_good_at_synopsis}}
							</view>
							<view class="pricebox u-flex">
								<view class="pit" v-if="item.consultation_status==1">图文：{{parseFloat(item.consultation_money||0)<=0||item.is_sign?'免费':'￥'+item.consultation_money}}</view>
								<view class="pit pit2" v-if="item.consultation_viedo_status==1">视频：{{parseFloat(item.consultation_viedo_money||0)<=0||item.is_sign?'免费':'￥'+item.consultation_viedo_money}}</view>
								<view class="pit pit3" v-if="item.consultation_report_status==1">报告解读：{{parseFloat(item.consultation_report_money||0)<=0||item.is_sign?'免费':'￥'+item.consultation_report_money}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<lj-empty v-else-if='!loading'>未搜索到相关医生</lj-empty>
			<view v-if="loading || group.list.length > 0">
				<u-loadmore
					:status="loading?'loading':(group.loaded?'nomore':'loadmore')"
					fontSize="12"
					color="#ccc"
					nomoreText="已加载全部"
					marginTop="40rpx"
					@loadmore="Ondoctor"
				></u-loadmore>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sech:'',
				atList: [],
				showArea: false,
				showAt: false,
				showMode: false,
				util: {}, //地址
				provinceList: [],
				cityList: [],
				interrogationModeList: [
					{
						id: 0,
						title: '全部'
					},
					{
						id: 1,
						title: '图文问诊'
					},
					{
						id: 2,
						title: '视频问诊'
					},
					{
						id: 3,
						title: '报告解读'
					}
				],

				areaTitle: '全部地区',
				academicTitlet: '全部职称',
				academicTitle: '',
				interrogationModeTitle: '问诊方式',

				provinceTitle: '',
				provinceCode: 0,
				cityCode: 0,
				academic: 0,
				interrogationMode: 0,

				group:{
					page: 1,
					limit: 10,
					list: [],
					loaded: false
				},
				loading: false,
			}
		},
		onLoad: function(options) {
			// this.sech = options.sech
			var that = this
			if(options.intmode){
				this.interrogationMode = options.intmode
				this.interrogationModeTitle = this.interrogationModeList[this.interrogationMode].title
			}

			this.$Http({
				url: 'academicTitle',
				token: false
			}).then(res => {
				if (res.code == 1) {
					that.atList = res.data;
					let obj = {
						id: 0,
						name: '全部',
						show: true
					}
					that.atList.unshift(obj)
				}
			})

			this.Ondoctor()
		},
		mounted() {
			var util = require('@/common/js/area.js');
			this.util = util.default.areaList
			//修改地址格式
			this.Onutil()
		},
		onReachBottom(){  //上拉触底函数
			this.Ondoctor();
		},
		methods: {
			Onutil() {
				var provinceList = [
					{
						title: '全部',
						code: 0
					}
				]
				for (let key in this.util.province_list) {
					provinceList.push({
						title: this.util.province_list[key],
						code: key
					})
				}
				this.provinceList = provinceList
			},
			changeProvince(code, title){
				this.provinceCode = code
				this.provinceTitle = title

				if(code){
					var cityList = [
						{
							title: '全部',
							code: 0
						}
					]
					for (let key in this.util.city_list) {
						if (code.substring(0, 2) == key.substring(0, 2)) {
							cityList.push({
								title: this.util.city_list[key],
								code: key
							})
						}
					}
					this.cityList = cityList
				}else{
					this.areaTitle = '全部地区'

					this.cityCode = 0
					this.cityList = []

					this.ljRefresh()
				}
			},
			changeCity(code, title){
				if(code) this.areaTitle = title
				else this.areaTitle = this.provinceTitle

				this.cityCode = code
				console.log(code, title)
				this.ljRefresh()
			},
			confirmAcademic(id, title){
				this.academic = id
				this.academicTitlet = id?title:'全部职称'
				this.academicTitle = id?title:'',
				this.ljRefresh()
			},
			confirmInterrogationMode(id, title){
				this.interrogationMode = id
				this.interrogationModeTitle = id?title:'问诊方式'
				this.ljRefresh()
			},
			ljRefresh(){
				this.showArea = false
				this.showAt = false
				this.showMode = false

				this.group.list = []
				this.group.page = 1
				this.group.loaded = false
				this.loading = false

				this.Ondoctor()
			},


			//医生列表
			Ondoctor() {
				var that = this,group = that.group;
				if(that.loading || group.loaded) return;

				that.loading = true

				let data = {
					page: group.page,
					limit: group.limit,
					name: this.sech,
					provinceCode: this.provinceCode,
					cityCode: this.cityCode,
					academic: this.academic,
					interrogationMode: this.interrogationMode,
				}
				this.$Http({
					url: 'doctorSearch2',
					data: data,
					load: false
				}).then(res => {
					if (res.code == 1) {
						var list = res.data;
						group.loaded = list.length < group.limit;
						group.page ++;
						group.list = group.list.concat(list);
					}
					that.loading = false
				}).catch(()=>{
					that.loading = false
				});
			},

			//详情页面
			Oninquiry(res) {
				uni.navigateTo({
					url: '/pagesA/ask/inquiry?id=' + res.id,
				})
			},
			Onsech(e){
				this.sech = e

				this.group.list = []
				this.group.page = 1
				this.group.loaded = false
				this.loading = false

				this.showArea=false
				this.showAt=false
				this.showMode=false

				this.Ondoctor()
			},
			onSelect(item){
				console.log('onSelect',item)
				this.$store.commit('selectDoctorobj', item)

				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f6f6f6;
	}
	@import '@/pages/style.less';
</style>
